<template>
  <div>
    <div class="top bluetop">
      <img src="../assets/logo.png" style="width: 100px; height: 30px" />
      <div class="search">
        <i class="hmtt hmtt-sousuo"></i>
        <span style="font-size: 13px; margin-left: 5px">搜索</span>
      </div>
    </div>
    <div class="bar">
      <van-tabs style="background-color: #ffffff">
        <van-tab v-for="item in mychannels" :title="item.name" :key="item.id">
          <!--          内容 {{ index }}-->
          <article-list :channel="item"></article-list>
        </van-tab>
        <van-cell class="hmtt hmtt-gengduo" @click="showPopup"></van-cell>
      </van-tabs>

      <van-popup
        v-model="show"
        closeable
        round
        close-icon-position="top-left"
        position="bottom"
        :style="{ height: '100%' }"
      >
        <div class="head">编辑频道</div>
        <div class="mypin">
          <div class="text">
            <div class="left">
              <span class="one">我的频道</span>
              <span class="two">点击进入频道</span>
            </div>
            <div class="right" @click="change" v-if="!del">编辑</div>
            <div class="right" @click="over" v-else>完成</div>
          </div>
          <div class="pinList">
            <div class="eve" style="font-size: 16px">推荐</div>
            <div
              class="eve"
              v-for="item in mychannels.slice(1)"
              :key="item.id"
              @click="todel(item.id)"
            >
              {{ item.name }}
              <van-icon name="close" class="close" v-if="del" />
            </div>
          </div>
        </div>
        <div class="tuijian mypin">
          <div class="text">
            <div class="left">
              <span class="one">推荐频道</span>
              <span class="two">点击添加频道</span>
            </div>
          </div>
          <div class="tuijian pinList">
            <div
              class="eve"
              v-for="item in channels.slice(1)"
              :key="item.id"
              @click="addMy(item.id)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { cunpindao, getpindao, pindaoBar } from "@/api/shouye";
import ArticleList from "@/views/components/article-list.vue";

export default {
  components: { ArticleList },
  data() {
    return {
      channels: [],
      show: false,
      del: false,
      tuijian: [],
      cunchannels: [],
      mychannels: [],
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    change() {
      this.del = !this.del;
    },
    async over() {
      this.del = !this.del;
      // console.log(this.channels);
      let i = 1;
      this.mychannels.forEach((item) =>
        this.cunchannels.push({ id: item.id, seq: `${i++}` })
      );
      // console.log(this.cunchannels);
      await cunpindao({ channels: this.cunchannels });
    },
    todel(id) {
      if (this.del) {
        const [del] = this.channels.filter((item) => item.id === id);
        this.mychannels = this.mychannels.filter((item) => item.id !== id);
        this.channels.push(del);
      }
    },
    addMy(id) {
      const [add] = this.channels.filter((item) => item.id === id);
      this.channels = this.channels.filter((item) => item.id !== id);
      this.mychannels.push(add);
    },
    async getMychannels() {
      try {
        const {
          data: { channels },
        } = await getpindao();
        // console.log(channels);
        this.mychannels = channels;
        // console.log(this.mychannels);
      } catch (err) {
        this.$toast("获取频道数据失败");
      }
    },
    async getBar() {
      try {
        const {
          data: { channels },
        } = await pindaoBar();
        this.channels = channels;
      } catch (err) {
        this.$toast("获取频道数据失败");
      }
    },
  },
  mounted() {
    this.getMychannels();
    this.getBar();
  },
};
</script>

<style lang="less" scoped>
.bluetop {
  align-items: center;
  justify-content: space-around;
  .search {
    width: 173px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 15px;
  }
}
.van-tab__text {
  color: #999999 !important;
}
/deep/ .van-tabs__line {
  width: 20px;
  background: #3196fa;
}
/deep/.van-tabs__nav--line.van-tabs__nav--complete {
  padding-left: 0;
}
/deep/.van-tabs__wrap--scrollable .van-tab {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 5px;
  width: 83px;
  height: 44px;
}
/deep/.van-icon-cross:before {
  font-size: 20px;
  color: #3196fa;
}
.head {
  text-align: center;
  line-height: 46px;
  width: 100%;
  height: 46px;
  border-radius: 10px 10px 0px 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
/deep/.van-overlay {
  background: rgba(0, 0, 0, 0);
}
.mypin {
  .text {
    display: flex;
    justify-content: space-between;
    height: 26px;
    line-height: 26px;
    padding: 10px 16px;
    .left {
      .one {
        font-size: 16px;
        color: #333333;
      }
      .two {
        font-size: 12px;
        color: rgba(0, 0, 0, 0.3);
        margin-left: 5px;
      }
    }
    .right {
      font-size: 12px;
      width: 50px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      border-radius: 11px;
      border: 1px solid #bc0202;
      color: #bc0202;
    }
  }
}
/deep/.van-cell {
  position: fixed;
  top: 46px;
  right: 5px;
  width: 24px;
  font-size: 20px;
  font-weight: 700;
  transform: scale(1.2, 1);
  color: #969896;
  background: rgba(255, 255, 255, 0.5);
}
.pinList {
  display: flex;
  align-items: center;
  width: 363px;
  flex-wrap: wrap;
  padding: 0px 2px 0px 10px;
  .eve {
    position: relative;
    flex: 1;
    width: 19%;
    min-width: 19%;
    max-width: 19%;
    height: 11px;
    padding: 16px 7px;
    font-size: 13px;
    line-height: 11px;
    background: #f2f3f4;
    margin: 0 7px 7px 0;
    text-align: center;
    .close {
      position: absolute;
      right: -5px;
      top: -5px;
      font-size: 16px;
    }
  }
}
</style>
